<template>
  <div v-loadmore='loadmore'>
    <headNav title="我的订单" ></headNav>
    <div class="flexHeight" >
      <div class="titleCss" >
        <span style="margin-right: 0.2rem;" >只查看未发货的订单</span>
        <x-switch @on-change="change" title="" :value-map="[0, 1]" v-model="state" ></x-switch>
      </div>
      <div class="bigDivCss" v-for="(val, index) in orderList" :key="index" >
        <div class="flexHeight  leftDiv" >
          <span class="titleSpan" >{{val.productName}}</span>
          <span style="margin-bottom: 0.1rem;" >购买时间：{{val.payTime | formatDateTime('YYYY-MM-dd HH:mm')}}</span>
           <span>收货人：{{val.name}}</span>        </div>
        <div class="flexHeight rightDiv" >
          <span style="margin-top: 0.25rem;" v-if="val.state == 1" >未发货</span>
          <span style="margin-top: 0.25rem; color: #FF9900;" v-if="val.state == 2" >已发货</span>
          <!-- <div @click="openFlow(val)" >
            <span>查看物流</span>
            <img src="@/assets/img/my/arrow.png" mode="" >
          </div> -->
        </div>
      </div>

       <load-more v-if="isMore" :show-loading="true" :tip="'加载中'" background-color="#fbf9fe"></load-more>
      <load-more v-else :show-loading="false" :tip="'没有更多了'" background-color="#fbf9fe"></load-more>
    </div>
    

     <flow ref="flow"></flow>
  </div>
</template>

<script>
import headNav from '@/components/headNav/headNav.vue'
import flow from './flow'
import { mapActions, mapState, mapGetters, mapMutations } from 'vuex'
import { getTrialClassApi, getMyOrderApi } from '@/api/myNewApi'
import { XSwitch, XDialog , LoadMore} from 'vux'

export default {
  components: {
    headNav,
    XSwitch,
    XDialog,
    LoadMore,
    flow
  },
  computed: {
    ...mapState({
      studentId: state => state.user.studentId,
      roleCode: state => state.user.roleCode,
      teacherId: state => state.user.teacherId,
      loginUserId: state => state.user.loginUserId
    })
  },
  data () {
    return {
      state: 0,
      showHideOnBlur: false,
      orderList: [],
      pageNum: 1,
      pageSize: 10,
      isMore: true
    }
  },
  methods: {
    loadmore () {
        if (!this.isMore) {
            return
        }
        this.pageNum ++
        this.packMyOrder(this.pageNum)
    },
    change () {
      this.orderList = []
        this.packMyOrder(1)
    },

    // 获取订单列表封装
    async packMyOrder (pageNum) {
      this.pageNum = pageNum
      let params = {
        PageNum: this.pageNum,
        PageSize: this.pageSize
      }
      if (this.state) {
        params.State = this.state
      }

      let res = await getMyOrderApi(params)
      let list = res.items
      this.orderList = this.orderList.concat(list)
      
      if (list.length < this.pageSize) {
        this.isMore = false
      } else {
        this.isMore = true
      }
      console.log(JSON.parse(res).Data.List)
    },

    openFlow (item) {
        this.$refs.flow.open()
    }
  },
  async mounted() {
    this.packMyOrder(1)
  }
}
</script>

<style lang="less" scoped >
.dialogBigDiv {
  padding: 0 0.3rem;
  margin-bottom: 0.5rem;
  .dialogTitle {
    font-size: 0.32rem;
    font-weight: 600;
    margin: 0.3rem 0;
  }
  .barCss {
    width: 0.035rem;
    height: 0.7rem;
    background: #CDCDCD;
    margin: -0.2rem 0 -0.2rem 1.22rem;
  }
  .textCss {
    display: flex;
    align-items:
    center; margin-left: 0.2rem;
    color: #999999;
    font-size: 0.28rem;
  }
  .classTopDiv {
    width: 0.12rem;
    height: 0.12rem;
    border-radius: 4rem;
    background: #CDCDCD;
    margin: 0 0.2rem;
  }
}

.bigDivCss {
  width: 6.7rem;
 
  background: #FFF;
  border-radius: 0.15rem;
  border: 1px solid #e8e2e2;
  margin: 0 0 0.3rem 0.2rem;
  display: flex;
  .leftDiv {
    width: 4.2rem;
    height: 100%;
    color: #666;
    font-size: 0.26rem;
    padding-left: 0.3rem;
    .titleSpan {
      color: #000;
      font-size: 0.32rem;
      margin: 0.2rem 0;
      font-weight: 600;
    }
  }
  .rightDiv {
    width: 1.7rem;
    height: 100%;
    padding-right: 0.5rem;
    font-size: 0.32rem;
    align-items: flex-end;
    div {
      display: flex;
      margin-top: 0.55rem;
      img {
        width: 0.1rem;
        height: 0.18rem;
        margin: 0.15rem 0 0 0.15rem;
      }
    }
  }
}

.titleCss {
  display: flex;
  align-items: center;
  margin: 0.2rem 0.3rem;
  font-size: 0.28rem;
}

.flexCenter {
  display: flex;
  align-items: center;
  justify-content: center;
}

.flexHeight {
  display: flex;
  flex-direction: column;
}

.flexAlign {
  display: flex;
  align-items: center;
}

.flexEdge {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
<style>
.weui-switch:checked, .weui-switch-cp__input:checked ~ .weui-switch-cp__box {
  border-color: #128FEF!important;
  background: #128FEF!important;
}
</style>
